<template>
  <div>
    <h2 style="margin: 20px 20px;">加密文件</h2>
    <div class="UploadWj">
      <el-select v-model="value" placeholder="请选择密钥" style="position: absolute;top: 0;left: 0;">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-upload class="upload-demo" ref="uploadKUser" :http-request="onUploadKUser" action=""
        :on-preview="handlePreviewKUser" :on-remove="handleRemoveKUser" :file-list="fileListKUser"
        :on-change="handleFileChange" :on-success="uploadSuccess" :multiple="true" :auto-upload="false" accept=""
        :limit="50" :on-exceed="OnExceedKUser">
        <img src="@/assets/upload.png" alt="" style="width: 100px;height: 100px;">
        <div>
          <el-button size="small" type="primary" style="margin: 20px 0 5px 0;width: 150px;height: 50px;
        border-radius: 6px 6px 6px 6px;font-size: 20px;background-color: #0055FF;">选择文件</el-button>
        </div>
      </el-upload>
      <div style="font-size: 18px;color: #000;font-weight: 600;margin: 15px 0 0 0;">注：请先选择密钥，再添加文件进行加密</div>
      <div style="font-size: 14px;color: #6E6E6E;margin: 10px 0;">单个上传文件最大100M,支持格式:excel、CSV</div>
      <el-button type="primary" @click="Determine" style="width: 160px;height: 50px;
        border-radius: 6px 6px 6px 6px;font-size: 20px;">确定上传</el-button>

    </div>

  </div>
</template>

<script>
import { Encryption, secretKey } from "@/api/user"
export default {

  data() {
    return {
      fileListKUser: [],
      options: [],
      value: ''
    };
  },
  created() {
    this.QuerysecretKey()
  },
  methods: {

    // 获取全部密钥
    async QuerysecretKey() {
      let res = await secretKey();
      const options = Object.keys(res.data).map(key => ({
        value: key, // 这里保留原始键名作为 value  
        label: res.data[key] // 对应的值作为 label  
      }));
      this.options = options;
    },

    async onUploadKUser(file) {
      let wenjian = file.file.name;
      const formData = new FormData()
      formData.append("file", file.file);
      formData.append("key", this.value);
      let UpFiles = await Encryption(formData);
      // console.log(UpFiles, "加密上传文件接口");

      const url = window.URL.createObjectURL(new Blob([UpFiles]));
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', wenjian);
      link.click();
      window.URL.revokeObjectURL(url);
      setTimeout(() => {
        document.body.removeChild(link);
      }, 2000);


    },
    handlePreviewKUser(file) {
      console.log(file, "1");
    },
    handleRemoveKUser(file, fileList) {
      console.log(file, fileList, "文件列表移除文件时的钩子");

    },
    handleFileChange(file, fileList) {
      this.fileListKUser = fileList

      // console.log(this.fileListKUser, "this.fileListKUser")


    },
    uploadSuccess(response, file, fileList) {
      this.$message({
        message: "上传成功",
        type: 'success'
      });
    },
    OnExceedKUser() {
      this.$message({
        message: "文件上传超出限制",
        type: 'error'
      });
    },


    Determine() {
      this.$refs.uploadKUser.submit();
    },
  },
};
</script>

<style lang="scss" scoped>
.UploadWj {
  position: relative;
  width: 1000px;
  height: 500px;
  border: 1px dashed #ccc;
  margin: 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #D7E5FF;
  justify-content: center;
}

::v-deep .el-input--suffix .el-input__inner {
  background-color: #0055FF;
  color: #fff;
  width: 170px;
  height: 50px;
  border-radius: 6px 6px 6px 6px;
}
</style>
